<template>
	<view class="introScroll">
		<view class="topView">
			<!-- 城市搜索输入框 -->
			<view class="serchView">
				<view class="serch">
					<image class="serchIconImage" src="/static/app-plus/image/center/centertool/shopRecruit/img_search_logo.png"></image>
					<input @input="cityInputListener" adjust-position="false" class="serchInput" placeholder="输入城市名称进行搜索" type="text" />
				</view>
			</view>
			<!-- 定位城市-标题 -->
			<!-- <view class="nowCityTextTipsView">
				<text class="nowLocationCity">当前定位城市</text>
			</view> -->
			<!-- 定位城市-内容 -->
			<!-- <view class="againLocationView">
				<text class="loactionText">{{nowCity}}</text>
				<text class="loactionStatusText">{{locationStatus}}</text>
				<image :animation="animation" @click="locationImageClick" class="refreshImage" src="/static/app-plus/image/index/refreshIcon.png"></image>
			</view> -->
		</view>
		<!-- 右侧字母 -->
		<view class='city_right'>
			<text class='letter_item' v-for='(item,index) in letter' :key='index' @tap.stop='letterTap(index)'>{{item}}</text>
		</view>
		<scroll-view scroll-with-animation="true" class="cityListView" scroll-y="true" :scroll-into-view="scrollId">
			<!-- 热门城市 -->
			<text class="hotCityTips" :id="'re'">热门城市</text>
			<view class='new_city_box'>
				<text class='new_city_text' v-for='(item,index) in hotCityList' :key='index' @tap.stop='cityTap(index)'>{{item.city}}</text>
			</view>
			<!-- 城市列表 -->
			<view class="forCityView">
				<view class="forCityItem" v-for="(item,index) in allCityList" :key="index">
					<view v-if="item.show" :id="item.letter" class="letterItemFirst">{{item.letter}}</view>
					<text @click="cityItemClick(index)" class="itemCityContent">{{item.city}}</text>
					<view v-if="!item.last" class="line"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
 
 
<script>
	export default {
		data() {
			return {
				nowCity: '',
				locationStatus: '定位成功',
				letter: ['热', "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T",
					"U", "V", "W", "X", "Y", "Z"
				],
				//热门城市
				hotCityList: [],
				//全部城市
				allCityList: [],
				//滑动到指定位置
				scrollId: '',
				//动画
				animation: {},
				//接口请求的数据
				cityList: [],
				lng:'',
				lat:''
			}
		},
 
		onLoad(options) {
			//设置title标题
			this.nowCity = '北京'
			this.hotCityList = this.returnHotCity()
			uni.setNavigationBarTitle({
				// title: '当前城市-' + this.nowCity
				title: '请选择城市'
			})
			//获取全国城市
			this.getCityList()
		},
 
		methods: {
			//拼音点击事件
			letterTap(index) {
				if (this.letter[index] == '热') {
					this.scrollId = 're'
				} else {
					this.scrollId = this.letter[index]
					this.$utils.toast(this.letter[index])
				}
			},
 
			//搜索
			cityInputListener(e) {
				let value = e.detail.value
				let cityAll = this.allCityList
				let newArray = []
				for (let i = 0; i < cityAll.length; i++) {
					if (cityAll[i].city.indexOf(value) != -1 || cityAll[i].letter == value.toUpperCase()) {
						newArray.push(cityAll[i])
					}
				}
				if (value == '') {
					this.formatCityData(this.cityList)
				} else {
					this.formatCityData(newArray)
				}
			},
 
			//获取地址
			getdcAddress(){
				let that = this
				that.$api.dcAddress({
					lng: this.lng,
					lat: this.lat,
				}).then(res => {
					// console.log(res,'地址')
					this.address = res.data.data
					this.shop_id = res.data.data.shop_id
					this.getShopData()
				}) 
			},
			// 定位
			locationImageClick() {
				console.log('kais')
				var that = this
				this.animation = uni.createAnimation()
				this.animation.rotate(360).step()
				this.animation = this.animation.export()
				this.locationStatus = '定位中...'
				uni.getLocation({
					geocode: true, // 是否解析地址信息（返回详细格式化地址信息）
					success: res => {
						this.lng = res.longitude
						this.lat = res.latitude
						// console.log(res,'reds')
						that.getdcAddress()
						// 获取当前位置坐标
						if (res.address != undefined) {
							that.nowCity = res.address.city;
							that.locationStatus = '定位成功'
						}
					},
					fail: res => {
						that.nowCity = '获取定位信息失败'
						console.log("获取定位信息失败");
					}
				});
 
			},
 
			//获取城市列表	
			getCityList() {
				let that = this
				that.$api.cityList().then(res => {
					this.cityList = res.data.data
					this.cityList = this.cityList.map(item=>{
						return {
							city:item.name,
							letter:item.first,
							id:item.id
						}
					})
					this.formatCityData(this.cityList)
				})
				
				// this.cityList = this.getAllCity()
				
			},
 
			formatCityData(array) {
				for (let i = 0; i < array.length; i++) {
					if (i == 0) {
						//第一条显示首字母
						array[i].show = true
					} else if (array[i].letter != array[i - 1].letter) {
						//首字母与上一条不一样需要显示
						array[i].show = true
						array[i - 1].last = true
					}
					if (array.length == 1) {
						array[0].last = true
					}
					array.show = false
				}
				this.allCityList = array
			},
 
			//城市条目点击
			cityItemClick(index) {
				var data = this.allCityList[index]
				uni.$emit('data', data);
				uni.navigateBack({
					delta: 1,
				})
			},
 
			//热门城市点击
			cityTap(index) {
				var data = this.hotCityList[index]
				uni.$emit('data', data);
				uni.navigateBack({
					delta: 1,
				})
			},
 
			returnHotCity() {
				var list = [{
					"city": "北京市",
					"id":2,
				}, {
					"city": "天津市",
					"id":20,
				}, {
					"city": "上海市",
					"id":802,
				}, {
					"city": "南京市",
					"id":821,
				}, {
					"city": "广州市",
					"id":1965,
				}, {
					"city": "深圳市",
					"id":1988,
				}, {
					"city": "武汉市",
					"id":1710,
				}, {
					"city": "成都市",
					"id":2368,
				}, {
					"city": "厦门市",
					"id":1183,
				}]
				return list;
			},
			// getAllCity() {}
		}
	}
</script>
 
<style>
	page {
		height: 100%;
		background-color: #F5F5F5;
	}
 
	.introScroll {
		height: 100%;
		width: 100%;
		display: flex;
		position: relative;
	}
 
	.topView {
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: 99;
		width: 100%;
	}
 
	.serchView {
		width: 100%;
		height: 110rpx;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		align-items: center;
		justify-content: center;
	}
 
	.serch {
		width: 690rpx;
		height: 70rpx;
		background: #F7F7F7;
		border-radius: 35rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
 
	.serchIconImage {
		width: 30rpx;
		height: 26rpx;
		margin-left: 30rpx;
	}
 
	.serchInput {
		height: 70rpx;
		width: 600rpx;
		margin-left: 12rpx;
		font-size: 30rpx;
		color: #000000;
	}
 
	.nowCityTextTipsView {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #F5F5F5;
		height: 50rpx;
		width: 100%;
		padding-bottom: 14rpx;
	}
 
	.nowLocationCity {
		line-height: 50rpx;
		font-size: 28rpx;
		color: #999999;
		margin-left: 36rpx;
		margin-top: 15rpx;
	}
 
	.againLocationView {
		height: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
		width: 100%;
		background-color: #FFFFFF;
	}
 
	.loactionText {
		font-size: 30rpx;
		color: #129DFF;
		margin-left: 30rpx;
	}
 
	.loactionStatusText {
		margin-left: 50rpx;
		font-size: 30rpx;
		color: #999999;
	}
 
	.refreshImage {
		position: absolute;
		right: 48rpx;
		padding: 10rpx;
		width: 38rpx;
		height: 38rpx;
	}
 
	.cityListView {
		display: flex;
		flex-direction: column;
		height: 100%;
		margin-top: 125rpx;
		position: relative;
		overflow: scroll;
	}
 
	.city_right {
		z-index: 99;
		width: 60rpx;
		display: flex;
		height: 100%;
		position: absolute;
		right: 0;
		flex-direction: column;
		justify-content: center;
		top: 120rpx;
	}
 
	.letter_item {
		display: block;
		font-size: 20rpx;
		color: #666;
		text-align: center;
		padding-left: 20rpx;
		padding-top: 3rpx;
		padding-bottom: 3rpx;
		font-weight: bold;
	}
 
	.hotCityTips {
		margin-left: 30rpx;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #999999;
	}
 
	.new_city_box {
		margin-top: 26rpx;
		display: flex;
		flex-wrap: wrap;
		padding: 0 60rpx 0 20rpx;
	}
 
	.new_city_text {
		width: 114rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 42rpx;
		color: #333;
		background: #fff;
		border-radius: 21rpx;
		margin: 0 10rpx 20rpx 10rpx;
	}
 
	.forCityView {
		width: 100%;
		padding-bottom: 30rpx;
	}
 
	.forCityItem {
		display: flex;
		flex-direction: column;
	}
 
	.letterItemFirst {
		height: 49rpx;
		padding-left: 40rpx;
		font-size: 30rpx;
		line-height: 49rpx;
		color: #000;
		background: #f7f7f7;
		width: 100%;
	}
 
	.itemCityContent {
		display: inline-block;
		width: 100%;
		height: 88rpx;
		font-size: 34rpx;
		color: #000000;
		padding-left: 40rpx;
		background-color: #FFFFFF;
		line-height: 88rpx;
	}
 
	.line {
		width: 642rpx;
		height: 1rpx;
		background-color: #ebebeb;
		margin-left: 40rpx;
	}
</style>